<template>
  <div style="boxs">
    <!-- <Header :params="params" /> -->
    <div class="boxCon">
      <van-tabs v-model="active" @change="onChange" sticky swipeable @scroll="scrollEvent" background="#F7F9FA" color="#299BFF" title-inactive-color="#333333" title-active-color="#299BFF" line-width="0.48rem" line-height="0.04rem">
        <van-tab :title="item" v-for="(item, index) in tabList" :key="index">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" :immediate-check="false" finished-text="没有更多了" @load="onLoad">
            <!-- 搜索栏 -->
            <header>
              <van-search v-model="inputVal" @input="searchCourse" shape="round" placeholder="搜索课次" />
              <!-- <input v-model="inputVal" type="text" placeholder="搜索课次" @input="searchCourse"> -->
              <div class="boxss">
                <div class="right" @click="showFilter">
                  <img src="img/shaixuanya@2x.png" alt="">
                  <span>筛选</span>
                </div>
              </div>
              <!-- <van-icon class="icon" name="search" /> -->
            </header>
            <!-- 筛选  级联选择器  弹窗 -->
            <!-- <van-popup v-model="show" round position="bottom" :style="{ height: '35%' }"> -->
            <van-popup v-model="show" round position="bottom">
              <van-picker show-toolbar :columns="columns" title="选择" cancel-button-text="重置" @confirm="onConfirm" @cancel="onReset" />
            </van-popup>
            <div class="bodyList">
              <div class="listCon" v-for="(ele, index) in dataList" :key="index">
                <div class="header">
                  <div class="header_l">
                    <div class="header_l_l" @click="toPersonal(ele)">
                      <img :src="ele.userHead" alt="">
                    </div>
                    <div class="header_l_r">
                      <div class="userName">
                        {{ele.submitUsername}}（{{ele.fenxiangUserdep}}）
                      </div>
                      <div class="lessonName" v-if="ele.partName">
                        {{ele.className}}-{{ele.classPartName}}{{"-"+ele.partName}}
                      </div>
                      <div class="lessonName" v-if="!ele.partName">
                        {{ele.className}}-{{ele.classPartName}}
                      </div>
                    </div>
                  </div>
                  <div class="header_r">
                    <div>{{ele.fenxiangUsername}}</div>
                    <div class="share">的分享</div>
                  </div>
                </div>
                <div class="body">
                  <div class="bodyTop">
                    <!-- 手写教案  =>  图片 -->
                    <div v-if="active == 0">
                      <img :src="'http://niu.icrobot.cn/'+each" v-for="(each, index) in ele.videoFile" :key="index" alt="" @click="preImg(ele.videoFile,index)">
                    </div>
                    <!-- 备课视频  精彩视频  =>  视频 -->
                    <!-- 视频列表 -->
                    <div class="videoList" v-if="active == 1 || active == 2">
                      <img src="/img/videoTask/videoListImg.png" alt="" v-for="(item, index) in ele.videoFile" :key="index" @click="preVideo(item)">
                    </div>
                  </div>
                  <div class="bodyBottom">
                    <div class="date">
                      {{ele.createTime.slice(0,10)}}
                    </div>
                    <div class="bottom_r">
                      <img :src="ele.zanImg" alt="" @click="dianZan(ele)"><span>{{ele.dianzanCount}}</span>
                      <img class="comsImg" src="/img/circle/pinglun.png" @click="toComs(ele)" alt=""><span>{{ele.replyCount}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <footer v-if="comFlag">
              <input v-model="comValue" type="text" autofocus placeholder="写评论"><span class="sendImg" @click="sendComs">发送</span>
            </footer>
            <!-- 视频预览 -->
            <div v-if="videoShow" @click="cancelVideo" class="videoMask">
              <div class="wrapper">
                <div @click.stop="">
                  <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions">
                  </video-player>
                </div>
              </div>
            </div>
          </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import { ImagePreview } from "vant";
import LessonVue from "../../lesson/Lesson.vue";
// import Header from "@/components/Header.vue";
export default {
  components: {
    // Header,
  },
  data() {
    return {
      refreshing: false,
      loading: false,
      finished: false,
      active: 0,
      images: [],
      // 搜索框
      value: "",
      // 评论框
      comValue: "",
      comFlag: false,
      show: false,
      columns: [],
      data: [],
      lesson: "",
      tabList: ["手写教案", "备课视频", "精彩视频"],
      totalNum: "",
      dataList: [],
      pageNum: 1,
      renWuType: "手写教案",
      taskId: "",
      toUid: "",
      toUsername: "",
      id: "",
      // 视频
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], //倍速控制
        autoplay: false, //是否自动播放
        muted: false, //是否静音播放
        loop: false, //是否循环播放
        preload: "auto",
        language: "zh-CN", //语言，还要引入对应的文件
        aspectRatio: "16:9", //比例
        fluid: true,
        sources: [
          {
            type: "",
            src: "", //url地址
          },
        ],
        poster: "", //你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试",
        controlBar: {
          timeDivider: true,
          durationDisplay: true, //剩余时间是否显示
          remainingTimeDisplay: false, //剩余时间是否显示，有一个即可
          fullscreenToggle: true, //全屏按钮
        },
      },
      videoShow: false,
      keyWord: "",
      classId: "",
      inputVal: "",
      classType: "",
    };
  },
  mounted() {
    this.active = JSON.parse(localStorage.getItem("cycleListOrder")) || parseInt(this.$route.query.type);
    // localStorage.setItem("cycleListOrder",parseInt(this.$route.query.type));
    if (this.active == 0) {
      this.renWuType = "手写教案";
      this.commonQueryData();
    } else if (this.active == 1) {
      this.renWuType = "备课视频";
      this.commonQueryData();
    } else if (this.active == 2) {
      this.renWuType = "精彩视频";
      this.queryPerfectVideo();
    }
    (async () => {
      let lesson = await this.get("/course/selectAllBusiness");
      this.lesson = lesson.data;
      let business = this.lesson
        .filter((item) => item.businessType == "事业部")
        .map((item) => {
          return { text: item.businessName, children: [], ...item };
        });
      let packages = this.lesson
        .filter((item) => item.businessType == "课程包")
        .map((item) => {
          return { text: item.businessName, children: [], ...item };
        });
      let course = this.lesson
        .filter((item) => item.businessType == "课程")
        .map((item) => {
          return { text: item.businessName, ...item };
        });

      let arr = this.pushChildren(packages, course);
      let newArr = this.pushChildren(business, arr);
      this.columns = newArr;
    })();
  },
  methods: {
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    queryPerfectVideo() {
      (async () => {
        const { data } = await this.get("/approve/queryPerfectVideo", {
          pageSize: 6,
          pageNum: this.pageNum,
          renWuType: this.renWuType,
          keyWord: this.keyWord,
          classType: this.classType,
        });
        for (var i = 0; i < data.items.length; i++) {
          // 添加默认没有点赞的图片
          data.items[i].zanImg = "/img/circle/zan.png";
          var arr = [];
          arr = data.items[i].videoFile.split("*");
          data.items[i].videoFile = arr;
          // 如果返回的icrobotDianzans数组中有当前登录的人的id就是点过赞的
          for (var j = 0; j < data.items[i].icrobotDianzans.length; j++) {
            if (
              localStorage.getItem("id") ==
              data.items[i].icrobotDianzans[j].userId
            ) {
              data.items[i].zanImg = "/img/circle/zaned.png";
              data.items[i].zanFlag = true;
            }
          }
        }
        this.totalNum = data.totalNum;
        this.dataList = [...data.items, ...this.dataList];
        this.loading = false;
        this.pageNum++;
        // 数据全部加载完成
        if (this.dataList.length >= this.totalNum) {
          this.finished = true;
        }
      })();
    },
    onChange(index) {
      this.active = index;
      // 存进localStorage中的数据必须是字符串
      localStorage.setItem("cycleListOrder", JSON.stringify(index));
      this.dataList = [];
      this.pageNum = 1;
      this.finished = false;
      this.loading = true;
      this.onLoad();
    },
    onLoad() {
      if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }
      if (this.active == 0) {
        this.renWuType = "手写教案";
        this.commonQueryData();
      } else if (this.active == 1) {
        this.renWuType = "备课视频";
        this.commonQueryData();
      } else if (this.active == 2) {
        this.renWuType = "精彩视频";
        this.queryPerfectVideo();
      }
    },
    // 数据列表
    commonQueryData() {
      (async () => {
        const { data } = await this.get("/approve/theResearchCircleShow", {
          pageSize: 6,
          pageNum: this.pageNum,
          renWuType: this.renWuType,
          keyWord: this.keyWord,
          classId: this.classId,
        });
        for (var i = 0; i < data.items.length; i++) {
          // 添加默认没有点赞的图片
          data.items[i].zanImg = "/img/circle/zan.png";
          var arr = [];
          arr = data.items[i].videoFile.split("*");
          data.items[i].videoFile = arr;
          // 如果返回的icrobotDianzans数组中有当前登录的人的id就是点过赞的
          for (var j = 0; j < data.items[i].icrobotDianzans.length; j++) {
            if (
              localStorage.getItem("id") ==
              data.items[i].icrobotDianzans[j].userId
            ) {
              data.items[i].zanImg = "/img/circle/zaned.png";
              data.items[i].zanFlag = true;
            }
          }
        }
        this.totalNum = data.totalNum;
        this.dataList = [...this.dataList,...data.items];
        this.loading = false;
        this.pageNum++;
        // 数据全部加载完成
        if (this.dataList.length >= this.totalNum) {
          this.finished = true;
        }
      })();
    },
    // 将同级数据转化为树形结构
    listToTree(list) {
      return list.filter((e) => {
        let pid = e.pid;
        let newArr = list.filter((ele) => {
          if (ele.id == pid) {
            if (!ele.children) {
              ele.children = [];
            }
            ele.children.push(e);
            return true;
          }
        });
        return newArr.length === 0;
      });
    },
    pushChildren(father, child) {
      father.forEach((item) => {
        child.forEach((value) => {
          if (item.id == value.pid) {
            item.children.push(value);
          }
        });
      });
      return father;
    },
    // 到个人中心页面
    toPersonal(val) {
      // console.log(val);
      // return;
      this.$router.push({
        path: "/Personal",
        query: {
          userId: val.submitUser
        }
      });
    },
    // 预览图片
    preImg(images, index) {
      this.images = images.map((item) => {
        return "http://niu.icrobot.cn/" + item;
      });
      ImagePreview({
        images: this.images,
        startPosition: index,
        onClose() {
          // do something
        },
      });
    },
    // 点赞
    dianZan(ele) {
      if (!ele.zanFlag) {
        (async () => {
          const data = await this.get("/approve/addGiveLike", {
            taskId: ele.id,
            submituserId: ele.submitUser,
          });
          if (data.code == 200) {
            ele.zanImg = "/img/circle/zaned.png";
            ele.zanFlag = true;
            this.$toast.success(data.msg);
            // 视图
            for (var i = 0; i < this.dataList.length; i++) {
              if (ele.id == this.dataList[i].id) {
                var obj = {};
                obj.username = localStorage.getItem("userName");
                this.dataList[i].icrobotDianzans.push(obj);
                // jiayi
                this.dataList[i].dianzanCount += 1;
              }
            }
          } else {
            this.$toast.fail(data.msg);
          }
        })();
      } else {
        (async () => {
          const data = await this.get("/approve/updateGiveLike", {
            taskId: ele.id,
          });
          if (data.code == 200) {
            ele.zanImg = "/img/circle/zan.png";
            ele.zanFlag = false;
            this.$toast.success("已取消");
            // 视图
            for (var i = 0; i < this.dataList.length; i++) {
              if (ele.id == this.dataList[i].id) {
                var obj = {};
                obj.username = localStorage.getItem("userName");
                this.dataList[i].icrobotDianzans = this.dataList[
                  i
                ].icrobotDianzans.filter(
                  (item) => item.username != localStorage.getItem("userName")
                );
                // jiayi
                this.dataList[i].dianzanCount -= 1;
              }
            }
          } else {
            this.$toast.fail(data.msg);
          }
        })();
      }
    },
    // 评论  到详情页面
    toComs(ele) {
      // 头像  名字 部门  谁的分享  图片列表  点赞人员
      this.$router.push({
        path: "/MoreCom",
        query: {
          userHead: ele.userHead,
          userName: ele.submitUsername,
          userDep: ele.fenxiangUserdep,
          buWho: ele.fenxiangUsername,
          imgList: ele.videoFile,
          className: ele.className,
          classPartName: ele.classPartName,
          partName: ele.partName,
          createTime: ele.createTime,
          taskId: ele.id,
          renWuType: this.renWuType,
          icrobotDianzans: ele.icrobotDianzans,
          type: this.renWuType,
          from: "列表"
        },
      });
    },
    // 发送评论
    sendComs() {
      (async () => {
        const data = await this.get("/approve/approveComment", {
          taskId: this.taskId,
          taskType: this.renWuType,
          commentContent: this.comValue,
          fromUid: localStorage.getItem("id"),
          toUid: this.toUid,
          fromUsername: localStorage.getItem("userName"),
          toUsername: this.toUsername,
          id: this.id,
        });
        this.$toast.success(data.msg);
        this.comValue = "";
        this.comFlag = false;
      })();
    },
    // 评论查询接口
    queryApproveComment() {
      (async () => {
        const { data } = await this.get("/approve/queryApproveComment", {
          taskId: this.taskId,
        });
      })();
    },
    // 监听页面滚动
    scrollEvent() {
      this.comFlag = false;
    },
    // 展开更多评论
    moreCom() {
      this.$router.push("/MoreCom");
    },
    showFilter() {
      this.show = true;
    },
    // 重置
    onReset(val, item) {
      if (this.renWuType == "精彩视频") {
        this.dataList = [];
        this.pageNum = 1;
        this.keyWord = "";
        this.classType = "";
        this.queryPerfectVideo();
        this.show = false;
      } else {
        this.dataList = [];
        this.pageNum = 1;
        this.keyWord = "";
        this.classId = "";
        this.commonQueryData();
        this.show = false;
      }
    },
    onConfirm(val, item) {
      if (this.renWuType == "精彩视频") {
        this.dataList = [];
        this.pageNum = 1;
        this.keyWord = "";
        this.classType = this.columns[item[0]].children[item[1]].children[
          item[2]
        ].id;
        this.queryPerfectVideo();
        this.show = false;
      } else {
        this.dataList = [];
        this.pageNum = 1;
        this.keyWord = "";
        this.classId = this.columns[item[0]].children[item[1]].children[
          item[2]
        ].id;
        this.commonQueryData();
        this.show = false;
      }
    },
    // 预览视频
    preVideo(item) {
      this.playerOptions.sources[0].src = "http://niu.icrobot.cn/" + item;
      this.$toast.loading({
        message: "加载中",
        duration: 500,
        onClose: () => {
          this.videoShow = true;
        },
      });
    },
    cancelVideo() {
      this.videoShow = false;
    },
    // 搜索课程
    searchCourse(val) {
      // 走不同的接口
      if (this.renWuType == "精彩视频") {
        this.dataList = [];
        this.pageNum = 1;
        this.finished = false;
        this.loading = true;
        this.keyWord = val;
        this.classType = "";
        this.queryPerfectVideo();
      } else {
        this.dataList = [];
        this.pageNum = 1;
        this.finished = false;
        this.loading = true;
        this.keyWord = val;
        this.classId = "";
        this.commonQueryData();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.boxs {
  width: 100%;
}
.sendImg {
  font-size: 0.2rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #299bff;
  margin-left: 0.15rem;
}
// 视频预览遮罩
.videoMask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    div {
      width: 100%;
    }
  }
}
// 视频列表图片展示
.videoList {
  width: 6rem;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.31rem;
  img {
    width: 0.94rem;
    height: 0.94rem;
    margin-right: 0.2rem;
    margin-top: 0.2rem;
  }
}
.boxCon {
  .search {
    width: 7.5rem;
    height: 0.59rem;
    border-top: 1px #e7e7e7 solid;
    display: flex;
    // position: fixed;
    // top: 0.88rem;
    // left: 0;
    // z-index: 999;
    .search_l {
      width: 3.75rem;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 0.26rem;
        height: 0.26rem;
      }
      span {
        font-size: 0.26rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        margin-left: 0.07rem;
      }
    }
  }
  .bodyList {
    .listCon {
      padding: 0 0.24rem 0.24rem;
      border-top: 1px solid #ededed;
      margin-bottom: 0.24rem;
      .header {
        display: flex;
        // align-items: center;
        justify-content: space-between;
        .header_l {
          display: flex;
          align-items: center;
          .header_l_l {
            img {
              width: 0.72rem;
              height: 0.72rem;
              border-radius: 50%;
            }
          }
          .header_l_r {
            margin-left: 0.17rem;
            .userName {
              font-size: 0.26rem;
              font-family: PingFang SC;
              font-weight: bold;
              color: #333333;
              width: 4.4rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .lessonName {
              font-size: 0.22rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: #f9732a;
              margin-top: 0.09rem;
            }
          }
        }
        .header_r {
          display: flex;
          margin-top: 0.15rem;
          div {
            font-size: 0.2rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: #2d9dff;
          }
          .share {
            color: #333333;
            margin-left: 0.08rem;
          }
        }
      }
      .body {
        .bodyTop {
          margin-left: 0.65rem;
          // width: 100%;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          img {
            width: 1.44rem;
            height: 1.44rem;
            border-radius: 0.06rem;
            margin-right: 0.16rem;
            margin-bottom: 0.16rem;
          }
        }
        .bodyTop img:nth-child(4n) {
          margin-right: 0;
        }
        .bodyTop img:last-child {
          margin-right: 0;
        }
        .bodyBottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-left: 0.65rem;
          .date {
            font-size: 0.2rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: #7e7e7e;
          }
          .bottom_r {
            display: flex;
            align-items: center;
            .comsImg {
              width: 0.34rem;
              height: 0.29rem;
              margin-left: 0.29rem;
            }
            span {
              font-size: 0.22rem;
              font-family: PingFang SC;
              font-weight: 400;
              margin-left: 0.1rem;
              color: #333333;
            }
          }
          .bottom_r img:first-child {
            width: 0.31rem;
            height: 0.33rem;
          }
        }
      }
      .half_line {
        width: 7.02rem;
        height: 1px;
        background: #ededed;
        margin: 0.2rem 0;
      }
      .footer {
        margin-left: 0.65rem;
        .comments {
          .zanGroup {
            font-size: 0.1rem;
            // line-height: 0.4rem;
            img {
              width: 0.26rem;
              height: 0.26rem;
              margin-right: 0.08rem;
            }
            span {
              font-size: 0.26rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: #0666ba;
              margin-bottom: 0.16rem;
            }
            .morePeople {
              margin-left: 0.08rem;
            }
          }
          .commentsArea {
            margin-top: 0.16rem;
            .directCom {
              font-size: 0.26rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: #0666ba;
              span {
                margin-bottom: 0.12rem;
              }
              .comInfos {
                color: #333333;
              }
            }
            .indirectCom {
              font-size: 0.26rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: #0666ba;
              span {
                margin-bottom: 0.12rem;
              }
              .huifu {
                margin: 0 0.08rem;
              }
              .comInfos {
                color: #333333;
              }
            }
          }
        }
        .moreCom {
          display: flex;
          align-items: center;
          margin-top: 0.16rem;
          span {
            font-size: 0.22rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: #2d9dff;
          }
          img {
            width: 0.18rem;
            height: 0.11rem;
            margin-left: 0.08rem;
          }
        }
      }
    }
  }
  .icon {
    position: absolute;
    left: 0.3rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.3rem;
  }
  // 搜索框
  header {
    padding-right: 0.2rem;
    box-sizing: border-box;
    border-top: 1px solid #ededed;
    // position: relative;
    background: #ffffff;
    justify-content: space-between;
    display: flex;
    align-items: center;
    /deep/ .van-search {
      background-color: #ffffff;
      padding: 0.2rem 0 0.2rem 0.2rem;
      width: 6rem;
      .van-search__content {
        background-color: #f7f9fa;
      }
    }
    .boxss {
      display: flex;
      align-items: center;
      // flex: 1;
      flex-wrap: nowrap;
      margin-left: 0.1rem;
    }
    .right {
      width: 1.2rem;
      height: 0.4rem;
      border: 1px solid #c3c3c3;
      border-radius: 0.2rem;
      padding: 0.1rem 0.2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;

      font-size: 0.22rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #343434;
      img {
        width: 0.22rem;
        height: 0.22rem;
      }
    }
  }
  // 评论框
  footer {
    width: 100%;
    padding: 0.17rem 0.24rem;
    box-sizing: border-box;
    align-items: center;
    display: flex;
    border-top: 1px solid #eee;
    background: white;
    position: fixed;
    bottom: 0;
    left: 0;
    input {
      width: 6.36rem;
      background: #ffffff;
      border: 1px solid #afafaf;
      border-radius: 0.08rem;
      padding: 0.15rem;
      box-sizing: border-box;
      font-size: 0.26rem;
    }
    img {
      width: 0.4rem;
      height: 0.36rem;
      margin-left: 0.25rem;
    }
  }
}
.van-field__control {
  background-color: #fff !important;
}
.haveNoComs {
  text-align: center;
  img {
    vertical-align: middle;
  }
  div {
    font-size: 0.28rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #c7c7c7;
    line-height: 0.28rem;
    margin-top: 0.46rem;
  }
}
</style>